<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/jquery.js"> </script>
	<style type="text/css">

		.nomore,
		.loading,
		.err,
		.succe{
		    position: fixed;
		    top: 50%;
		    left: 50%;
		    padding: 20px;
		    transform: translate(-50%,-50%);
		    border-radius: 20px;
		    height: 140px;
		    width: 150px;
		    color: #FFFFFF;
		}
		.nomore .text_box, .loading p,
		.succe p, .err p {
		    bottom: 10px;
		    left: 50%;
		    font-size: 16px;
		    text-align: center;
		    width: 100%;
		    position: absolute;
		    transform: translate(-50%,0);
		}
		.loading{
			background: rgba(0,0,0,.5) url(images/loading.gif) no-repeat center 20px/100px 100px;
		}
		.nomore{
			background: rgba(0,0,0,.5) url(images/nomore.png) no-repeat center 20px/100px 100px;
		}
		.err{
			background: rgba(0,0,0,.5) url(images/err.png) no-repeat center 20px/100px 100px;
		}
		.succe{
			background: rgba(0,0,0,.5) url(images/succe.png) no-repeat center 20px/100px 100px;
		}

	</style>
</head>
<body>

	<button id="btn1">按钮1</button>
	<button id="btn2">按钮2</button>
	<button id="btn3">按钮3</button>
	<button id="btn4">按钮4</button>
<script type="text/javascript">


$(document).ready(function(){
	$("#btn1").click(function(){
		fade('loading',true);
	});
	$("#btn2").click(function(){
		fade('loading');
	});
	$("#btn3").click(function(){
		fade('err','ojbj');
	});
	$("#btn4").click(function(){
		fade('succe','laligela');
	});
	
	$("#btn4").click(function(){
		new Promise(function (resolve, reject){
			
			fade('loading',true);
			resolve();
			
		}).then(function(value){
			
			console.log(111);
			fade('loading');
			resolve();
			
		}).catch(function(err){
			
			fade('err','ojbj');
			console.log(222);
			
		}).finally(function(){
			
			fade('succe','laligela');
			console.log(333);
			
		});
	});
	
	
	
	
	
	// function ajax(URL) {
	// 	return new Promise(function(resolve,reject){
	// 		var req = new XMLHttpRequest(); 
	// 		req.open('GET', URL, true);
	// 		req.onload = function () {
	// 		if (req.status === 200) { 
	// 				resolve(req.responseText);
	// 			} else {
	// 				reject(new Error(req.statusText));
	// 			} 
	// 		};
	// 		req.onerror = function () {
	// 			reject(new Error(req.statusText));
	// 		};
	// 		req.send(); 
	// 	});
	// }
	// var URL = "/try/ajax/testpromise.php"; 
	// ajax(URL).then(function onFulfilled(value){
	// 	document.write('内容是：' + value); 
	// }).catch(function onRejected(error){
	// 	document.write('错误：' + error); 
	// });
	
	
	
	
});

let fade=function(className,msg=false){
console.log(msg);

switch (className){
	case 'loading':
		if(msg){
			
			$("body").append('<div class='+`${className}`+'><p>'+`${msg}`+'</p></div>');
			$('.'+`${className}`).css({"transition":".5s","opacity":"0"});
			setTimeout(()=>{
				$('.'+`${className}`).css("opacity","1");
			},1);
			
		}else{
			
			$('.'+`${className}`).css("opacity","0");
			setTimeout(()=>{
				$('.'+`${className}`).remove();
			},500);
			
		}
	break;
	
	default:
		// err和succe
		// 添加元素
		$("body").append('<div class='+`${className}`+'><p>'+`${msg}`+'</p></div>');
		$('.'+`${className}`).css({"transition":".5s","opacity":"0"});

		// 添加后开始显示
		setTimeout(()=>{
			$('.'+`${className}`).css("opacity","1");
		},1);

		// 3s后隐藏
		setTimeout(()=>{
			$('.'+`${className}`).css("opacity","0");
			// 隐藏完成，删除元素
			setTimeout(()=>{
				$('.'+`${className}`).remove();
			},500);
		},3000);

	break;
	
	// 异步完成,但是考虑到兼容性,pass掉
	// case 'succe':
		
	// 	new Promise(function (resolve, reject) {
			
	// 		$("body").append('<div class='+`${className}`+'><p>'+`${msg}`+'</p></div>');
	// 		$('.'+`${className}`).css({"transition":".5s","opacity":"0"});
	// 	    resolve();
			
	// 	}).then(function(value){
			
	// 		return new Promise((resolve, reject)=>{
	// 			setTimeout(()=>{
	// 				$('.'+`${className}`).css("opacity","1");
	// 				resolve();
	// 			}, 1);
	// 		});
			
	// 	}).then(function(value){
			
	// 		return new Promise((resolve, reject)=>{
	// 			setTimeout(()=>{
	// 				$('.'+`${className}`).css("opacity","0");
	// 				resolve();
	// 			},3000);
	// 		});
		
	// 	}).catch(function(err){
			
	// 		console.log(err);
			
	// 	}).finally(function(){
	// 		setTimeout(()=>{
	// 			// 隐藏完成，删除元素
	// 			console.log("End");
	// 			$('.'+`${className}`).remove();
	// 		},500);
	// 	});
	
	// break;

	}

}
// $('button').on('click',function(e){
// 	let self=$('.fade');
// 	self.toggleClass('on');
// 	let reg=self.prop('className').indexOf('on');

// 	fade('err',true);

// });

// let fade=function(className,reg){

// 	console.log($('.'+`${className}`),reg);


// 	$('.'+`${className}`).css({"transition":".5s","opacity":"1"});

// 	setTimeout(function(){
// 		$('.'+`${className}`).hide();
// 	},500);


// };


</script>
</body>
</html>
